<template>
  <app-page>
    <mxp-refresh-page ref="mxpRefreshPageRef" :queryData="queryList">
      <view class="handpick-list">
        <view v-for="(item, index) in payDramaRecord" :key="index" class="handpick-item" @click="openVideoDetails(item)">
          <view class="img-box">
            <mxp-image width="45px" height="90px" borderRadius="6px" :src="item.dramaCover"></mxp-image>
          </view>
          <view class="info-box">
            <text class="title">{{ item.dramaTitle }}</text>
            <text class="info">演员：{{ item.performer }}</text>
            <text class="info">总收益：{{ item.totalAmount }}</text>
          </view>
        </view>
      </view>
    </mxp-refresh-page>
  </app-page>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import MxpImage from '@/mxp-ui/mxp-image/mxp-image.vue';
  import AppPage from '@/components/app-page/app-page.vue';
  import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
  import MxpRefreshPage, { type Ins } from '@/mxp-ui/mxp-refresh-page/mxp-refresh-page.vue';
  import { type CooperationEarnings, queryCooperationEarningsAxios } from '@/api/cooperation';
  import { openPlayletPage } from '@/utils/page/rest';
  import { useRefresh } from '@/mxp-ui/mxp-tool/hooks/useHooksRefresh';
  const { mxpRefreshPageRef } = useRefresh(onPullDownRefresh, onReachBottom);
  /** 播放记录列表 */
  const payDramaRecord = ref<CooperationEarnings[]>([]);

  /**
   * 获取数据
   */
  async function queryList(ins: Ins) {
    try {
      const res = await queryCooperationEarningsAxios(ins.page, ins.size);
      payDramaRecord.value = ins.page > 1 ? payDramaRecord.value.concat(res.data.records) : res.data.records;
      ins?.setMoreSuccess(res.data.records.length, res.data.total);
    } catch (error) {
      ins?.setMoreEmpty('fail_load', error.msg || '获取数据失败，BD001');
    }
  }

  /** 打开视频详情 */
  function openVideoDetails(item: CooperationEarnings) {
    openPlayletPage(item);
  }
</script>

<style lang="scss" scoped>
  .handpick-list {
    padding: 0 15px;

    .handpick-item {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      width: 100%;
      padding: 15px;
      margin-top: 15px;
      background: #ffffff;
      border-radius: 10px;

      .info-box {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 15px;

        .title {
          font-size: 14px;
          font-weight: bold;
          color: #333333;
        }

        .info {
          font-size: 12px;
          color: #666666;
        }
      }
    }
  }
</style>
